import React, { Component } from 'react';
import { Layout, Menu, Badge } from 'antd';
import { withRouter } from 'react-router-dom';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ArrowsAltOutlined,
  BulbOutlined,
} from '@ant-design/icons';
import screenfull from 'screenfull';
import '../style/customize/app.less';
import avator from '../style/img/avator.svg';

const { Header } = Layout;
const { SubMenu } = Menu;
type HeaderCustomProps = {
  toggle: () => void;
  collapsed: boolean;
  path?: string;
};

class HeaderCustom extends Component<HeaderCustomProps> {
  menuClick = (e: { key: string }) => {
    e.key === 'logout' && this.logout();
  };
  logout = () => {
    console.log('exit');
  };
  screenFull = () => {
    if (screenfull.isEnabled) {
      screenfull.request();
    }
  };

  render() {
    return (
      <Header className="ct-head-padding">
        {React.createElement(
          this.props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
          {
            className: 'ct-trigger',
            onClick: this.props.toggle,
          }
        )}
        <div className="float-right">
          <Menu theme="dark" mode="horizontal" style={{ lineHeight: '64px' }}>
            <Menu.Item key="full" onClick={this.screenFull}>
              <ArrowsAltOutlined
                className="ct-text-base font-bold"
                onClick={this.screenFull}
              />
            </Menu.Item>
            <Menu.Item key="1">
              <Badge count={2} overflowCount={10} style={{ marginLeft: 10 }}>
                <BulbOutlined className="ct-text-base font-bold" />
              </Badge>
            </Menu.Item>
            <SubMenu
              title={
                <div className="flex items-center">
                  <img
                    className="rounded-full h-8 w-8"
                    src={avator}
                    alt="avator"
                  />
                  <span className="ct-text-base ml-2">张先生</span>
                </div>
              }
            >
              <Menu.Item key="information">个人信息</Menu.Item>
              <Menu.Item key="logout" onClick={this.logout}>
                <span onClick={this.logout}>退出登录</span>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </div>
      </Header>
    );
  }
}

export default withRouter(HeaderCustom);
